<template>
    <div class="tourist">
        <div class="top">
            <span style="color: aliceblue;font-weight: 700;font-size: 20px;">实时游客统计</span>
            <div class="logo"></div>
            <span class="num">
                <span>可预约总量</span>
                <span class="cal">数量</span>
                <span>人</span>
            </span>
        </div>

        <div class="number" style="color:#fff">
            <span v-for="(item,index) in people" :key="index">{{item}}</span>
        </div>
        <div class="charts" ref="charts">

        </div>
    </div>
</template>
<script setup name='tourist'>
    import { ref, onMounted } from 'vue'
    //echarts插件引入
    import * as echarts from 'echarts'
    //水球图拓展插件
    import 'echarts-liquidfill'
    let people = ref('20008123人')
    //水球图的实例
    let charts = ref()
    onMounted(() => {
   
        let mycharts = echarts.init(charts.value)
        mycharts.setOption({
            series: {
                type: 'liquidFill',
                data: [0.5, 0.4, 0.3],
                //圆半径
                radius: '80%',
                //动画
                waveAnimation: true,
                animationDuration: 3,
                animationDurationUpdate: 0,
                outline: {
                    show: true,
                    borderDistance: 6,
                    itemStyle: {
                        color: 'red',
                        borderWidth: 5,
                        borderColor: '#156ACF',
                        shadowBlur: 20,
                        shadowColor: 'rgba(255, 0, 0, 1)'
                    }
                }
            },

        })
    })
</script>
<style scoped lang='scss'>
    .tourist {
        margin: 10px 0 20px 30px;
        position: relative;
        background: url('@/views/screen/images/dataScreen-main-lt.png') no-repeat;
        background-size: cover;

        .top {
            .logo {

                display: block;
                margin-top: 10px;
                width: 68px;
                height: 7px;
                background: url('@/views/screen/images/dataScreen-title.png') no-repeat;

            }

            .num {
                position: absolute;
                top: 20px;
                right: 5px;
                color: aliceblue;
                font-size: 14px;

                .cal {

                    color: orange;
                    margin-left: 5px;
                    margin-right: 5px;
                }
            }
        }


        .number {
            margin-top: 50px;
            width: 100%;

            display: flex;
            padding-left: 5px;
            padding-right: 5px;

            span {
                flex: 1;
                background: url('@/views/screen/images/total.png') no-repeat;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 20px;

            }
        }

        .charts {
            width: 100%;
            height: 240px;

        }
    }
</style>